<template>
  <div class="box">
    <van-nav-bar
      title=""
      left-text=""
      right-text="帮助"
      left-arrow
      @click-left="prev"
      class="up"
    />
    <div class="logo">
      <svg class="icon" aria-hidden="true">
        <use xlink:href="#icon-xiaomixinLogo"></use>
      </svg>
    </div>
    <van-cell-group class="ss">
      <van-field
        v-model="value1"
        label=""
        left-icon=""
        placeholder="邮箱/手机号码/小米ID"
      />
      <br />

      <van-field
        v-model="value2"
        clearable
        label=""
        left-icon=""
        right-icon="warning-o"
        @click-right-icon="reveal"
        placeholder="密码"
        :type="msg"
      />
    </van-cell-group>
    <!-- <van-field v-model="password" type="password" label="密码" /> -->
    <div class="clause">
      <!-- <input type="radio" /> -->
      <van-checkbox
        v-model="checke"
        checked-color="#ee0a24"
        @click="pitch"
      ></van-checkbox>
      <div>
        <span class="ok">已阅读并同意</span>
        <span>《小米商城用户协议》</span>
        <span>《小米商城隐私政策》</span>
        <span>《小米账号用户协议》</span>
        <span>《小米账号隐私政策》</span>
      </div>
    </div>
    <div style="margin: 16px">
      <van-button round block type="info" native-type="submit" @click="login">登录</van-button>
    </div>
    <div class="cipher">
      <div class="left">忘记密码</div>
      <div class="right">验证码登录</div>
    </div>
    <p>—— 其他登录方式 ——</p>
    <div class="rests">
      <svg class="icon1" aria-hidden="true">
        <use xlink:href="#icon-weixin"></use>
      </svg>
      <svg class="icon2" aria-hidden="true">
        <use xlink:href="#icon-qq"></use>
      </svg>
      <svg class="icon3" aria-hidden="true">
        <use xlink:href="#icon-weibo"></use>
      </svg>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import axios from "axios";
import { Cell, CellGroup } from "vant";
import { Form } from "vant";
import { Field } from "vant";
import { Checkbox, CheckboxGroup } from "vant";
// import Vue from "vue";
Vue.use(Checkbox);
Vue.use(CheckboxGroup);
Vue.use(Form);
Vue.use(Field);
Vue.use(Cell);
Vue.use(CellGroup);
import { Toast } from "vant";

Vue.use(Toast);

export default {
  name: "install",
  data() {
    return {
      value1: "",
      value2: "",
      pass: true,
      checke: false,
      msg: "password",
      sss: "",
    };
  },
  methods: {
    pitch() {
      this.checke != this.checke;
      if (this.checke != true) {
        Toast("请勾选协议");
      }
    },
    prev() {
      this.$router.back();
    },
    reveal() {
      if (this.msg == "password") {
        this.msg = "text";
      } else {
        this.msg = "password";
      }
    },
    login() {
      axios({
        url: "http://localhost:3000/sidiaoVips?tel=" + this.value1,
        method: "get",
        params: {
          type: this.type,
        },
      }).then((res) => {
        console.log(res.data);
        this.pass = true;
        if (this.checke != true) {
          Toast("请勾选协议");
          this.pass = false;
        } else if (this.value1 == "") {
          Toast("用户名不能为空");
          this.pass = false;
        } else if (this.value2 == "") {
          Toast("密码不能为空");
          this.pass = false;
        }
        console.log(this.pass);
        console.log(res.data);
        console.log(res.data.password);
        if (this.pass != false && res.data.length != 0) {
          if (this.value2 == res.data[0].password) {
            localStorage.setItem("tel", this.value1);
            this.$router.replace('/mine');
          } else if (this.value2 == "") {
            Toast("密码不能为空");
            // this.pass = false;
          } else {
            Toast("用户名或密码错误");
          }
        } else if (this.pass != false && res.data.length == 0) {
          Toast("用户名或密码错误");
        }
      });
      // if(this.value1==""){
      //   console.log(1);
      // }
    },
  },
};
</script>

<style scoped>
@import url(../assets/xiaomi-iconfont/iconfont.css);
.rests {
  display: flex;
  justify-content: center;
}
.icon {
  width: 0.6rem;
  height: 0.6rem;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.icon1 {
  width: 0.3rem;
  height: 0.3rem;
  padding: 0.07rem;
  border-radius: 50%;
  background: white;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.icon2 {
  width: 0.3rem;
  height: 0.3rem;
  padding: 0.07rem;
  color: red;
  border-radius: 50%;
  background: white;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
  margin-left: 0.3rem;
  margin-right: 0.3rem;
}
.icon3 {
  width: 0.3rem;
  height: 0.3rem;
  padding: 0.07rem;
  color: red;
  border-radius: 50%;
  background: white;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.van-cell {
  border-radius: 0.1rem;
  /* background: #adadad; */
}
.up {
  background: #eaeaea;
  color: #000;
}
.logo {
  text-align: center;
  margin-bottom: 0.3rem;
}
.van-icon {
  display: flex;
  width: 0.1rem;
  height: 0.1rem;
}
p {
  text-align: center;
  font-size: 0.13rem;
  color: #8c8c8c;
}
.clause {
  font-size: 0.12rem;
  margin-top: 0.15rem;
  padding: 0 0.25rem;
  display: flex;
  align-items: flex-start;
  /* flex-wrap: wrap; */
}
.clause div {
  padding: 0.09rem;
}
.clause .ok {
  color: #8c8c8c;
}
.clause span {
  color: #dc681e;
}
.cipher {
  display: flex;
  justify-content: space-between;
  padding: 0 0.15rem;
  color: #8c8c8c;
  font-size: 0.15rem;
  margin-bottom: 1.2rem;
}
p {
  margin-bottom: 0.2rem;
}
.ss {
  width: 100%;
  padding: 0 0.15rem;
  box-sizing: border-box;
  /* border-radius: 20px; */
  background: #eaeaea;
}
</style>
